<template>
  <div class="top-side">
    <div class="title">
      {{title}}
    </div>
    <div class="time">
      {{yyyyMMdd}}
      <strong>{{HHmm}}</strong>
    </div>
  </div>
</template>
<script>
import Mock from "mockjs"
export default {
  props: ["title"],
  data() {
    return {
      yyyyMMdd: "",
      HHmm: ""
    }
  },
  mounted() {
    const date = Mock.Random.now("yyyyMMddHHmm")
    let year = date.substring(0,4)
    let month = date.substring(4,6);
    let day = date.substring(6,8)
    let hour = date.substring(8,10)
    let minute = date.substring(10,12)
    this.yyyyMMdd =  `${year}.${month}.${day}`;
    this.HHmm = `${hour}:${minute}`
  }
}
</script>


<style lang="scss" scoped>
.top-side {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  .title {
    font-size: 60px;
    color: white;
    position: absolute;
    top: 30px;
    left: 60px;
    text-shadow: 0 0 20px #fbfbfb;
  }
  .time {
    font-size: 35px;
    color: white;
    position: absolute;
    top: 30px;
    right: 60px;
    text-shadow: 0 0 20px #fbfbfb;
    strong {
      font-size: 60px;
    }
  }
}
</style>
